<template>
  <div class="content">
    <div class="nav-logo">
      <div class="nav-icon">
        <img src="@/assets/proImg/hospital.png" class="nav-icon-img">
      </div>
      <div class="nav-title">
        <p>电子病历解析系统</p>
      </div>
    </div>
    <div class="nav-account">
      <div class="nav-account-icon">
      </div>
      <div class="nav-account-username">
        <el-dropdown>
        <div class="el-dropdown-link">
          {{ username }}<i class="el-icon-arrow-down el-icon--right"></i>
        </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item class="nav-account-username-choice" @click.native="clickDropDpwm(1)">个人中心</el-dropdown-item>
            <el-dropdown-item class="nav-account-username-choice" @click.native="clickDropDpwm(2)">消息通知</el-dropdown-item>
            <el-dropdown-item class="nav-account-username-choice" @click.native="clickDropDpwm(3)" >登出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <div class="nav-account-username">
          <img src="@/assets/proImg/headSculpture.png" class="nav-icon-head">
        </div>
      </div>
    </div>
<!--    <el-menu-->
<!--      :default-active="currentPath"-->
<!--      router-->
<!--      mode="horizontal"-->
<!--      background-color="white"-->
<!--      text-color="#222"-->
<!--      active-text-color="red"-->
<!--      style="min-width: 1300px">-->
<!--      <el-menu-item v-for="(item,i) in navList" :key="i" :index="item.name">-->
<!--        {{ item.navItem }}-->
<!--      </el-menu-item>-->
<!--      <span style="position: absolute;padding-top: 20px;right: 43%;font-size: 20px;font-weight: bold">White Jotter - Your Mind Palace</span>-->
<!--      <el-input-->
<!--        placeholder="快速搜索..."-->
<!--        prefix-icon="el-icon-search"-->
<!--        size="medium"-->
<!--        style="width: 300px;position:absolute;margin-top: 12px;right: 18%"-->
<!--        v-model="keywords">-->
<!--      </el-input>-->
<!--    </el-menu>-->
  </div>
</template>

<style scoped>
a{
  text-decoration: none;
}

span {
  pointer-events: none;
}

.content {
  color: white;
  height: 70px;
  background-color: #38c0aa;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.nav-logo {
  order: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.nav-icon {
  margin-left: 20px;
  margin-right: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav-title {
  font-size: 14px;
  font-weight: bold;
}

.nav-account {
  display: flex;
  flex-direction: row;
  justify-content: right;
  align-items: center;
  order: 2;
}

.nav-account-icon {
  margin-right: 20px;
}

.nav-account-username {
  margin-right: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.el-dropdown-link {
  z-index: 999;
  cursor: pointer;
  color: white;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.nav-account-username-choice:hover {
  color: #42b983;
  background-color: #d1ffe5;
}

.nav-icon-img {
  width: 80px;
}

.nav-head {
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav-icon-head {
  width: 50px;
  margin-left: 20px;
}
</style>

<script>
export default {
  name: 'NavMenu',
  data () {
    return {
      username: '',
      router: {
        login: '/login',
        message: '/case/messageNotify',
        personal: '/case/personalCenter'
      }
    }
  },
  created () {
    this.returnUsername()
  },
  methods: {
    returnUsername () {
      this.$axios.get('/getUsername')
        .then(response => {
          const username = response.data.data
          this.username = username
        })
        .catch(error => {
          console.error(error)
        })
    },
    clickDropDpwm (index) {
      if (index === 1) {
        this.$router.push('/case/personal')
      } else if (index === 2) {
        this.$router.push('/case/message')
      } else if (index === 3) {
        this.$router.push('/login')
      }
    },
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    }
  },
  computed: {
    hoverBackground () {
      return '#ffd04b'
    },
    currentPath () {
      var x = this.$route.path.indexOf('/', 1)
      if (x !== -1) {
        return this.$route.path.substring(0, x)
      } else {
        return this.$route.path
      }
    }
  }
}
</script>
